<template>
  <div>
    <!--搜索-->
    <el-row>
      <el-col :span="24">
        <div class="search">
          <el-form :inline="true" :model="query">
            <el-form-item class="text" label="管理员编号：">
              <el-input
                placeholder="请输入管理员编号"
                v-model="query.id"
                size="small"
                clearable>
              </el-input>
            </el-form-item>
            <el-form-item class="text" label="管理员名称">
              <el-input
                placeholder="请输入管理员名称"
                v-model="query.queryAccount"
                size="small"
                clearable>
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-button icon="el-icon-search" size="mini" type="primary" @click="onSubmit">搜索</el-button>
              <el-button icon="el-icon-refresh" size="mini" @click="onReset">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
    </el-row>
    <!--工具栏-->
    <el-row style="padding: 5px">
      <el-col :span="24">
        <div class="tools">
          <el-button @click="handleAdd" size="mini" icon="el-icon-plus" type="primary">新增</el-button>
        </div>
      </el-col>
    </el-row>
    <!--表格-->
    <el-row>
      <el-col :span="24">
        <div style="width: auto;">
          <el-table
            :data="adminList"
            stripe
            style="width: 100%;">
            <el-table-column
              type="selection"
              align="center"
              width="55">
            </el-table-column>
            <el-table-column
              label="管理员编号"
              prop="id"
              width="180">
            </el-table-column>
            <el-table-column
              prop="account"
              label="管理员姓名"
              v-model="query.queryAccount"
              width="180">
            </el-table-column>
            <el-table-column
              prop="password"
              v-model="query.password"
              label="管理员密码">
            </el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-edit"
                  @click="handleEdit(scope.$index, scope.row)">编辑
                </el-button>
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-edit"
                  @click="resetPassWord(scope.$index,scope.row)">重置密码
                </el-button>
                <el-button
                  size="mini"
                  type="text"
                  style="color: red"
                  icon="el-icon-delete"
                  @click="handleDelete(scope.$index, scope.row)">删除
                </el-button>
                &nbsp;
              </template>
            </el-table-column>
          </el-table>
          <div style="margin-top: 15px;text-align: right;">
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="query.pageNo"
              :page-sizes="[10,20,50,100, 200, 300, 400]"
              :page-size="query.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="page.count"
            >
            </el-pagination>
          </div>
        </div>
      </el-col>
    </el-row>


    <el-dialog
      title="新增"
      :visible.sync="addDialogVisible"
      width="30%">
      <el-form :inline="true" :model="query" label-width="180px">
        <el-row>
        </el-row>
        <el-row>
          <el-form-item class="text" label="管理员姓名:">
            <el-input
              placeholder="请输入管理员姓名"
              v-model="query.queryAccount"
              size="small"
              clearable>
            </el-input>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item class="text" label="管理员密码:">
            <el-input
              placeholder="请输入管理员密码"
              v-model="query.password"
              size="small"
              clearable>
            </el-input>
          </el-form-item>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="addDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="addAdmin">确 定</el-button>
  </span>
    </el-dialog>
    <el-dialog
      title="编辑"
      :visible.sync="editDialogVisible"
      width="30%">
      <el-form :inline="true" :model="query" label-width="180px">
        <el-row>
          <el-form-item class="text" label="管理员编号:">
            <el-input
              placeholder="请输入管理员编号"
              v-model="query.id"
              size="small"
              disabled
              clearable>
            </el-input>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item class="text" label="管理员姓名:">
            <el-input
              placeholder="请输入管理员名称"
              v-model="query.account"
              size="small"
              clearable>
            </el-input>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item class="text" label="管理员密码:">
            <el-input
              placeholder="请输入管理员名称"
              v-model="query.password"
              size="small"
              clearable>
            </el-input>
          </el-form-item>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="editDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="updateAdmin">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
import {getAdminList, addAdmin, updateAdminById, deleteAdminById, resetPwd} from '@/api/admin'
import {Message} from "element-ui";

export default {
  name: "Home",
  inject: ['reload'],
  data() {
    return {
      adminList: null,
      query: {
        "pageNo": 1,
        "pageSize": 10,
        queryAccount: '',
        password: '',
        id: '',
      },
      row: '',
      page: {
        "count": 0,
        "pageNo": 1,
        "pageSize": 10,
        "list": []
      },
      searchData: {
        input1: "",
        input2: "",
      },
      currentPage: 1,
      addDialogVisible: false,
      editDialogVisible: false
    }
  },
  created() {

    this.getAdminAll();
  },

  methods: {
    getAdminAll() {
      getAdminList(this.query).then(resp => {
        this.adminList = resp.data.list;
        this.page.count = resp.data.total;
      })
    },

    addAdmin() {
      console.log(this.query)
      addAdmin(this.query).then(resp => {
        if (resp.success) {
          this.$message({
            type: 'success',
            message: '新增成功',
          });
          this.addDialogVisible = false;
          this.reload();
        } else {
          this.$message({
            type: 'error',
            message: resp.msg,
          });
          this.addDialogVisible = false;
          this.reload();
        }
      })
    },

    updateAdmin() {
      updateAdminById(this.query).then(resp => {
        if (resp.success) {
          console.log(resp)
          this.$message({
            type: 'success',
            message: '更新成功',
          });
          this.editDialogVisible = false
          this.reload();
        } else {
          this.$message({
            type: 'error',
            message: resp.msg,
          });
          this.editDialogVisible = false
          this.reload();
        }
      })
    },
    resetPassWord(index, row) {
      this.query = row;
      this.$confirm('是否确认重置管理员"' + row.account + '"的密码??', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        resetPwd(this.query).then(resp => {
          if (resp.success) {
            console.log(resp)
            this.$message({
              type: 'success',
              message: '重置密码成功',
            });
            this.editDialogVisible = false
            this.reload();
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消重置密码'
        });
        this.editDialogVisible = false
        this.reload();
      });
    },

    onSubmit() {
      console.log(this.query)
      this.getAdminAll();
    },
    onReset() {
      this.query.id = "";
      this.query.queryAccount = "";
      this.getAdminAll();
    },
    handleAdd() {
      this.addDialogVisible = true;
    },
    refresh() {
      console.log("---")
      this.$NProgress.start();
      this.$NProgress.done()
    },
    handleEdit(index, row) {
      this.editDialogVisible = true;
      this.query = row;
    },
    handleDelete(index, row) {
      console.log(index, row);
      this.$confirm('是否确认删除管理员姓名为"' + row.account + '"的账号??', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteAdminById(row.id).then(resp => {
          if (resp.success) {
            this.reload();
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    handleSizeChange(size) {
      this.query.pageSize = size;
      this.getAdminAll();
    },
    handleCurrentChange(currentPage) {
      this.query.pageNo = currentPage;
      this.getAdminAll();
    },


  }
}
</script>
<!--公共样式-->
<style>

</style>
